<template>
  <div class="allgroup-container">
    <div class="main">
      <div class="main__top is-fixed">
        <div class="tabs">
          <nuxt-link
            to="/group/AllJoined"
            :class="
              $route.path.indexOf('AllGroup') < 0
                ? 'tab-node--active'
                : 'tab-node'
            "
            >已加入的圈子</nuxt-link
          >
          <nuxt-link
            to="/group/AllGroup"
            :class="
              $route.path.indexOf('AllGroup') > 0
                ? 'tab-node--active'
                : 'tab-node'
            "
            >全部圈子</nuxt-link
          >
        </div>
        <ul class="sub-tabs">
          <li
            v-for="(circle, index) in circleList"
            :key="index"
            :class="['sub-tab-node', { active: currentCirCleIndex == index }]"
            @click="jumpToNode(index)"
          >
            {{ circle.groupName }}
          </li>
        </ul>
      </div>
      <div class="main-content">
        <ul class="content-list" ref="contentList" @scroll="scrollTo()">
          <li
            class="content-list-node"
            v-for="(circle, index) in circleList"
            :key="index + 'i'"
          >
            <CircleGroup
              :circleGroup="circle"
              :index="index"
              :currentCirCleIndex="currentCirCleIndex"
            />
          </li>
        </ul>
      </div>
    </div>
    <div class="aside">
      <Recommend :minNum="3" :maxNum="7" />
    </div>
  </div>
</template>

<script>
import Recommend from '../components/Recommend'
import CircleGroup from '../components/CircleGroup'
export default {
  name: 'AllGroup',
  data() {
    return {
      // 当前圈子的下标
      currentCirCleIndex: 0,
      //节点高度
      nodeHight: 276,
      // 滚动时间
      rollTime: 300,
      // 跳跃标识 用于处理滚动事件和点击事件的冲突
      isJump: false,
      // 记录上次滚动的时间
      lastRollTime: 0,
      circleList: [
        {
          id: '11',
          groupName: '柔派圈子2',
          list: [
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
          ],
        },
        {
          id: '112',
          groupName: '游戏圈子5',
          list: [
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子2',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
          ],
        },
        {
          id: '113',
          groupName: '穿戴酷玩圈子7',
          list: [
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
          ],
        },
        {
          id: '114',
          groupName: '随手拍圈子1',
          list: [
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
          ],
        },
        {
          groupName: '柔派圈子2',
          id: '11',
          list: [
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
          ],
        },
      ],
    }
  },
  mounted() {
    this.nodeHight = document.querySelector('.content-list-node').offsetHeight
    let date = new Date()
    this.lastRollTime = date.getTime()
  },
  methods: {
    // nodeHight 节点高度
    scrollTo() {
      let date = new Date()
      let nowTime = date.getTime()
      if (nowTime - this.lastRollTime < 10) {
        this.lastRollTime = nowTime
        return
      }
      this.lastRollTime = nowTime
      if (this.isJump) {
        return
      }
      // 获取dom 元素
      let el = this.$refs.contentList
      // 获取滚动节点个数
      let index = parseInt(el.scrollTop / this.nodeHight)
      this.currentCirCleIndex = index
    },
    // 当前选中的下标
    jumpToNode(index) {
      let threa = Math.abs(this.currentCirCleIndex - index)
      index = parseInt(index)
      this.isJump = true
      this.scrollToY(
        index * this.nodeHight,
        this.rollTime * threa,
        this.$refs.contentList
      )
      this.currentCirCleIndex = index
      const timer = setInterval(() => {
        this.isJump = false
        clearInterval(timer)
      }, this.rollTime * threa + 200)
    },
    scrollToY(y, duration, element) {
      // cancel if already on target position
      if (element.scrollTop === y) return

      const cosParameter = (element.scrollTop - y) / 2
      let scrollCount = 0,
        oldTimestamp = null
      function step(newTimestamp) {
        if (oldTimestamp !== null) {
          // if duration is 0 scrollCount will be Infinity
          scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
          if (scrollCount >= Math.PI) return (element.scrollTop = y)
          element.scrollTop =
            cosParameter + y + cosParameter * Math.cos(scrollCount)
        }
        oldTimestamp = newTimestamp
        window.requestAnimationFrame(step)
      }
      window.requestAnimationFrame(step)
    },
  },
  components: {
    Recommend,
    CircleGroup,
  },
  watch: {
    currentCirCleIndex: {
      handler(index) {
        index = parseInt(index)
        if (this.isJump) return
        this.scrollToY(
          parseInt(index) * this.nodeHight,
          this.rollTime * (index + 1),
          this.$refs.contentList
        )
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.allgroup-container {
  padding-top: 5px;
  padding-bottom: 24px;
  display: flex;
  justify-content: center;
}
.main {
  width: 800px;
}
.main__top {
  background: $color-background;
  margin-bottom: 8px;
  padding: 24px 32px;
  min-height: 128px;
}
.main-content {
  min-height: 500px;
  background: $color-background;
}
.main-content .floors {
  padding: 24px 32px;
}
.tabs {
  padding-bottom: 24px;
}
.tab-node {
  opacity: 0.6;
  font-size: 16px;
  font-weight: 500;
}
.tab-node--active {
  font-size: 16px;
  font-weight: 500;
}
.sub-tabs {
  display: flex;
  flex-wrap: wrap;
}
.sub-tab-node {
  margin-right: 24px;
  margin-bottom: 16px;
  line-height: 20px;
  color: $color-font-grey;
  cursor: pointer;
}
.aside {
  margin-left: 24px;
  width: 376px;
}
.gap {
  height: 1px;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
  margin-bottom: 32px;
}
.main-content {
  padding: 24px 32px;
}
.content-list {
  height: 600px;
  overflow-y: scroll;
}
.content-list-node {
  padding-bottom: 24px;
}
.active {
  color: $color-royole;
}
</style>
